<template>
	<div v-bind:class="{'sideBar': $store.state.isCollapse, 'sideBar1': !$store.state.isCollapse}">
		<ul class="menu" v-if="$store.state.isCollapse">
			<li class="home">
				<router-link to="/main" class="subnavTop"><i class="icon iconfont icon-shouye"></i><span>首页管理</span></router-link>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-xitongguanli"></i>系统管理</a>
				<ul class="subnav">
					<li>
						<router-link to="/system" class="">系统管理</router-link>
					</li>
					<li>
						<router-link to="/banner" class="">banner</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-webicon06 size2"></i>基础管理</a>
				<ul class="subnav">
					<li>
						<router-link to="/provider" class="">商家管理</router-link>
					</li>
					<li>
						<router-link to="/customer" class="">客户管理</router-link>
					</li>
					<li>
						<router-link to="/pop" class="">推广渠道</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-yewuliucheng size2"></i>业务处理</a>
				<ul class="subnav">
					<li>
						<router-link to="/demand" class="">客户需求</router-link>
					</li>
					<li>
						<router-link to="/provi" class="">商家需求</router-link>
					</li>
					<li>
						<router-link to="/allot" class="">业务分配</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-chaxun sizes"></i>查询分析</a>
				<ul class="subnav">
					<li>
						<router-link to="/proAllotq" class="">分配汇总</router-link>
					</li>
					<li>
						<router-link to="/manquery" class="">分配统计</router-link>
					</li>
					<li>
						<router-link to="/popquery" class="">推广汇总</router-link>
					</li>
					<li>
						<router-link to="/popdetail" class="">推广明细</router-link>
					</li>
				</ul>
			</li>
		</ul>
		<ul class="menu1" v-else="">
			<li class="home">
				<router-link to="/main" class="subnavTop"><i class="icon iconfont icon-shouye"></i><span>首页</span></router-link>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-xitongguanli"></i><span>系统管理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/system" class="">系统管理</router-link>
					</li>
					<li>
						<router-link to="/banner" class="">banner</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-webicon06 siez4"></i><span>基础管理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/provider" class="">商家管理</router-link>
					</li>
					<li>
						<router-link to="/customer" class="">客户管理</router-link>
					</li>
					<li>
						<router-link to="/pop" class="">推广渠道</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-yewuliucheng siez4"></i><span>业务处理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/demand" class="">客户需求</router-link>
					</li>
					<li>
						<router-link to="/provi" class="">商家需求</router-link>
					</li>
					<li>
						<router-link to="/allot" class="">业务分配</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-chaxun siez3"></i><span>查询分析</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/proAllotq" class="">分配汇总</router-link>
					</li>
					<li>
						<router-link to="/manquery" class="">分配统计</router-link>
					</li>
					<li>
						<router-link to="/popquery" class="">推广汇总</router-link>
					</li>
					<li>
						<router-link to="/popdetail" class="">推广明细</router-link>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	import store from '@/vuex/store'
	export default {
		name: 'sideBar',
		store,
		mounted: function() {
			$('.router-link-active').parent().parent().siblings().css('color','#64a2bd')
			$(".home").click(function(){
    				$(".subnav").hide(300)
    		})
			$('.subnav').hide();
			$('.menu>li').on('click', function() {
				var that = $(this)
				$(this).children('.subnavTop').css('color','#fff')
				.parent().siblings().children('.subnavTop').
				css('color','#64a2bd').end().end().children('.subnav')
				.toggle(200).addClass("animated slideInLeft")
				.parent().siblings().children("ul").hide(300)
				setTimeout(function() {
					that.children("ul").removeClass("slideInLeft animated")
				}, 1000);
			})
			$(".menu>li>ul").click(function(){
    				event.stopPropagation();
    	 	})
		},
		methods: {}
	}
</script>

<style>
	.sideBar {
		padding-top: 60px;
		width: 200px;
		height: 100%;
		background: #00587d;
		position: fixed;
		transition: all 0.2s ease;
		z-index: 99;
	}
	.sideBar1 {
		padding-top: 60px;
		width: 70px;
		height: 100%;
		background: #00587d;
		position: fixed;
		transition: all 0.2s ease;
		z-index: 99;
	}
	
	.menu {
		width: 100%;
		color: #fff;
		padding-bottom: 20px;
	}
	
	.menu a {
		color: #64a2bd;
		text-decoration: none;
	}
	
	.nav-menu>li {
		position: relative;
		transition: all 0.3s;
	}
	
	.subnav li a {
		padding-left: 45px;
		transition: all 0.3s;
	}
	
	.nav-menu li {
		border-left: 3px solid transparent;
		-webkit-transition: border-left-color 0.2s ease;
		-o-transition: border-left-color 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.menu a {
		color: #64a2bd;
		padding: 12px 24px;
		letter-spacing: .025em;
		font-weight: 400;
		cursor: pointer;
		display: block;
		text-decoration: none;
		transition: all .3s;
	}
	
	.router-link-active {
		color: #fff !important;
	}
	@keyframes slideInLeft {
		from {
			transform: translate3d(-100%, 0, 0);
			visibility: visible;
		}
		to {
			transform: translate3d(0, 0, 0);
		}
	}
	
	.slideInLeft {
		animation-name: slideInLeft;
	}
	
	.animated {
		animation-duration: 1s;
		animation-fill-mode: both;
	}
	
	.animated.infinite {
		animation-iteration-count: infinite;
	}
	.menu .icon{
		font-size: 20px;
	}
	
	.menu1 a {
		color: #64a2bd;
		text-decoration: none;
	}
	.menu1{
		height: 100%;
		width: 70px;
		color: #7ab3cc;
		transition: all 0.3s;
	}
	.menu1 .icon{
		font-size: 40px;
	}
	.menu1 span{
		display: none;
		transition: all 0.3s;
	}
	.menu1>li{
		padding: 10px 0;
		position: relative;
	}
	.menu1>li>a{
		text-align: center;
		display: block;
		
	}
	.menu1>li>.subnav1{
		width: 200px;
		background:  #3a3f51;
		position: absolute;
		display: none;
		top: 0;
		left: 67px;
		z-index: 999999999999;
		transition: all 0.3s;
		border-left: 2px solid #2f3447;
	}
	.subnav1>li{
		line-height: 40px;
		text-indent: 20px;
	}
	.menu1>li:hover .subnav1{
		display: block !important;
	}
	.subnavTop i{
		display: inline-block;	
		width: 25px;
		text-align: center;
	}
	.subnavTop .sizes{
		font-size: 17px !important;
	}
	.subnavTop .size2{
		position: relative;
		top:3px;
		font-size: 25px !important;
	}
	.menu1 .subnavTop i{
		display: inline-block;	
		width: 40px;
		text-align: center;
	}
	.menu1 .subnavTop .siez3{
		font-size: 37px !important;
	}
	.menu1 .subnavTop .siez4{
		font-size: 45px;
		position: relative;
    	right: 5px
	}
</style>